import React from 'react'
import Header from '@/components/Header'
import DownloadFooter from '@/components/DownloadFooter'
import conf from '@/config'
import LazyLoad from 'react-lazyload'
import Introduce from '@/components/manga/Introduce'
import '@/pages/share.less'
import { inject, observer } from 'mobx-react'
import ReactGA from 'react-ga'
ReactGA.initialize('UA-134997102-1')
ReactGA.pageview('share')
@inject('mangaStore')
@observer
class Manga extends React.Component {
  static async getInitialProps({ query, mobxStore, req, asPath }) {
    const header = req.headers
    if (!mobxStore.mangaStore.manga._id) {
      await Promise.all([
        mobxStore.mangaStore.getMange(query.id),
        mobxStore.mangaStore.getMangeChapters(query.id, query.number)
      ])
    } else {
      await mobxStore.mangaStore.getMangeChapters(query.id, query.number)
    }
    return { query, header }
  }
  Detail(list) {
    const Comp = []
    for (let k in list) {
      Comp.push(<LazyLoad key={k} throttle={200} height={300}><img src={conf.cdn(`${this.props.query.id}/${list[k]}`)} /></LazyLoad>)
    }
    return Comp
  }
  render() {
    const header = this.props.header
    const { chapters, manga } = this.props.mangaStore
    return (
      <div className='manga'>
        <Header title={manga.title} description={manga.description} image={conf.cdn(manga.image)} />
        <Introduce manga={manga} />
        <div className="chapters-detail" key="chapters-detail">
          {(Object.keys(chapters).length > 0) ? this.Detail(chapters) : (<div className="waitforloading">loading......</div>)}
        </div>
        <DownloadFooter header={header}/>
        <style global jsx>
          {`
            body {
              background: #222222;
            }
         `}
        </style>
      </div>
    )
  }
}

export default Manga
